<template>
  <div class="tab-container">
    <el-dialog title="新增请假" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="员工" :label-width="'120px'">
          <el-select v-model="form.empNo" placeholder="请选择请假员工">
            <el-option v-for="(v, i) in empList" :key="i" :label="v.empName" :value="v.empNo"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" :label-width="'120px'">
          <el-date-picker value-format="yyyy-MM-dd" v-model="form.startDate" type="date" placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" :label-width="'120px'">
          <el-date-picker value-format="yyyy-MM-dd" v-model="form.endDate" type="date" placeholder="选择结束时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="天数" :label-width="'120px'">
          <el-input v-model="form.days" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请假类型" :label-width="'120px'">
          <el-select v-model="form.type" placeholder="请选择请假员工">
            <el-option v-for="(v, i) in leaveType" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请假原因" :label-width="'120px'">
          <el-input v-model="form.reason" width="100px" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="审批人" :label-width="'120px'">
          <el-select v-model="form.auditor" placeholder="请选择审批人">
            <el-option v-for="(v, i) in empList2" :key="i" :label="v.empName" :value="v.empNo"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false; form = {}">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <h1>请假管理</h1>
    <el-button type="primary" @click="addLeave">添加请假记录</el-button>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="empName" label="姓名" width="180">
      </el-table-column>
      <el-table-column prop="startDate" label="请假开始时间" width="180">
      </el-table-column>
      <el-table-column prop="endDate" label="请假结束时间">
      </el-table-column>
      <el-table-column prop="days" label="请假天数">
      </el-table-column>
      <el-table-column prop="reason" label="请假原因">
      </el-table-column>
      <el-table-column prop="auditor" label="审批人">
      </el-table-column>
      <el-table-column prop="auditTime" label="审批时间">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" @click="update(scope.$index, scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getEmpList ,getEmpList2 } from '@/api/emp';
import { leaveList, saveLeave, getUser } from '@/api/leaveManage';


export default {
  name: 'Leave',
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      list: [],
      dialogFormVisible: false,
      form: {},
      empList: [],
      empList2: [],
      leaveType: [{
        value: 2,
        label: '病假'
      },
      {
        value: 1,
        label: '事假'
      },
      {
        value: 3,
        label: '倒休'
      },
      {
        value: 5,
        label: '产假'
      },
      {
        value: 4,
        label: '年假'
      },
      {
        value: 6,
        label: '婚假'
      },
      {
        value: 7,
        label: '丧假'
      }
      ]
    }
  },
  created() {
    this.getList();
    getEmpList().then(res => {
      this.empList = res.rows
    })

    getEmpList2().then(res => {
      this.empList2 = res.rows
    })
  },
  methods: {
    async getList() {
      let res = await leaveList()
      for (let i = 0; i < res.rows.length; i++) {
        let reslut = await getUser(res.rows[i].empNo);
        res.rows[i].empName = reslut.data.empName;

        let reslut2 = await getUser(res.rows[i].auditor);
        res.rows[i].auditorName = reslut2.data.auditorName;
      }
      this.list = res.rows
    },
    addLeave() {
      this.dialogFormVisible = true;

    },
    save() {
      saveLeave(this.form).then(res => {
        if (res.code == 200) {
          this.$message('保存成功');
          this.dialogFormVisible = false;
          this.getList();
        }
      })
    },
    update(i, v) {
      this.form = v;
      this.form.type = v.type * 1;
      this.dialogFormVisible = true;
    }
  }

}
</script>

<style scoped></style>